
import {userListApi} from '@/api/modules/userApi'
import MyTable from '@/components/MyTable';
import MySrarch from '@/components/MySearch';
import { SexEnum } from '@/types/login';
import { CellType,InputTypes ,SearchOptions} from "@/components/MySearch/SearchType";
import {useCallback,useState} from 'react'
import { useNavigate } from 'react-router-dom';
export default function UserList() {
  const navigate = useNavigate()
  const handleDetail = ()=> {
    navigate('/sys/user/list/detail')
  }
  // 表格配置
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      render: (text:keyof typeof  SexEnum) => {
        return SexEnum[text]
      }
    },
    {
      title: '操作',
      dataIndex: '',
      render: (text:string, roicd:any) => {
        return <a onClick={handleDetail}>详情</a>
      }
    },
  ]
  //  勾选配置项
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
      console.log(`选中 key: ${selectedRowKeys}`, '选中项: ', selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'User 1', // 禁选项
      name: record.name,
    }),
    defaultSelectedRowKeys:[1,2,3,4] //默认勾选项
  };

  // 检索栏配置
  const config = [
    {
      types:InputTypes.INPUT,
      config:{
        item: {
          label: '名字：',
          name:'name',
          a:''
        },
        options: {
          placeholder: '123',
        }
      } 
    },
    {
      types:InputTypes.SELECT,
      config:{
        item: {
          label: '性别：',
          name:'sex'
        },
        options: {
          options:[
            { value: 'male', label: '男' },
            { value: 'remale', label: '女' },
          ]
        }
      } 
    },
    {
      types:InputTypes.DATERANGE,
      config:{
        item: {
          label: '生日：',
          name:'birthday'
        },
        options: {
          format:'YYYY-MM-DD'
        }
      } 
    },{
      types:InputTypes.DATERANGE,
      config:{
        item: {
          label: '生日：',
          name:'birthday'
        },
        options: {
          format:'YYYY-MM-DD'
        }
      } 
    },{
      types:InputTypes.DATERANGE,
      config:{
        item: {
          label: '生日：',
          name:'birthday'
        },
        options: {
          format:'YYYY-MM-DD'
        }
      } 
    },{
      types:InputTypes.DATERANGE,
      config:{
        item: {
          label: '生日：',
          name:'birthday'
        },
        options: {
          format:'YYYY-MM-DD'
        }
      } 
    }
  ]
  const [search,setSearch] = useState()
  const onFinish = (values: any) => {
    setSearch(values)
  }
  const RenderTable = useCallback((values: any) => {
    return <MyTable
    rowKey='id'
    search={search}
    row={rowSelection}
    getList={userListApi}
    columns={columns}
    ></MyTable>
  },[search]);
  
  return <div>
    <MySrarch onFinish={onFinish} searchConfig={config}></MySrarch>
    <RenderTable></RenderTable>
  </div>;
}
